<script>
import {data} from "autoprefixer";

export default {
  name:"Jingdian",
  data() {
    return {
      cityList:[{
        cityName:""
      }],
      city:"",
      form:{
        name:""
      },
      fit: 'contain',
      viewList: [{
        viewId: "",
        cityId: "",
        viewName: "",
        viewPic: "",
        viewInfo: "",
        viewPic1: "",
        viewInfo1: "",
        viewAddr: "",
        viewPrice: "",
        viewMark: ""
      }],
      viewNames:[{
        viewName:""
      }]
    }
  },
  methods: {
    data,
    onSubmit() {
      this.$axios.get('/view/viewfindAllCityName?cityName='+this.form.name).then(res=>{
        console.log(res.data.code)
        console.log(res.data.data)
        this.viewList = res.data.data
      })
    },
    cityfindAll(){
      this.$axios.get('/city/getAll').then(res=>{
        console.log(res.data.data)
        this.cityList = res.data.data;
      })
    },
    viewfindAll(){
      this.$axios.get('/view/viewfindAll').then(res=>{
        console.log(res.data.data)
        this.viewList = res.data.data.records;
      })
    },
    //根据城市查询对应的景点名称·
    viewName(){
      console.log(this.city)
      this.$axios.get('/view/viewName?cityName='+this.city).then(res=>{
        console.log(res.data.data)
        this.viewNames = res.data.data;
      })
    },
    viewSubmit(viewId){
      this.$router.push({name: "jingdianxiangqi",params:{
        viewId:viewId
        }})
      // console.log(viewId)
    },
    findAll(){
      this.$axios.get('/view/viewfindAll').then(res=>{
        console.log(res.data.data)
        this.viewList = res.data.data.records;
      })
    },
    PriceAsc(){
      this.$axios.get('/view/viewAsc').then(res=>{
        console.log(res.data.data)
        this.viewList = res.data.data;
      })
    },
    PriceDesc(){
      this.$axios.get('/view/viewDesc').then(res=>{
        console.log(res.data.data)
        this.viewList = res.data.data;
      })
    }
  },
  mounted() {
    this.cityfindAll();
    this.viewfindAll();
    this.viewName();
  },
}
</script>

<template>
<div class="map-container">

  <div >
    <el-form :inline="true" :model="form" class="demo-form-inline">

      <el-form-item>
        <el-select v-model="city" placeholder="选择城市" class="sousuo2">
          <div v-for="city in cityList">
          <el-option :label="city.cityName" :value="city.cityName"></el-option>
          </div>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-input v-model="form.name" placeholder="请输入景点，主题，目的地" class="sousuo"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit()" class="sousuo1">查询</el-button>
      </el-form-item>
      </el-form>

  </div>

  <div>
    <el-row class="anniu">
      <el-button type="primary" @click="findAll()">全部查</el-button>
      <el-button type="success" @click="PriceAsc()">价格升</el-button>
      <el-button type="warning" @click="PriceDesc()">价格降</el-button>
    </el-row>
  </div>
  <br>
<!--  <el-collapse class="jingdian">-->
<!--    <el-collapse-item title="游玩景点" name="1">-->
<!--      <div v-for="viewName in viewNames"> </div>-->

<!--    </el-collapse-item>-->
<!--  </el-collapse>-->

  <div class="shuju" style="display:flex;justify-content:flex-start" >
    <div>
    <el-row :ref="viewList" v-for="view in viewList" :key="view.viewId" class="text">
      <el-col :span="9" style="margin-left: 20px">
        <div class="demo-image">
          <div class="block" key="fit">
<!--            <span class="demonstration">{{ fit }}</span>-->
            <el-image
              style="width: 280px; height: 200px"
              :src="view.viewPic"
              fit="fit"></el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="9">
        <br>
        <br>
        <span>{{view.viewInfo}}
        <br>
          {{view.viewInfo}}
          <br>
          {{view.viewInfo}}
          <br>

        </span>
      </el-col>
      <el-col :span="5" >
        <br>
        <br>
        <span style="font-size: 20px;color: #f60;margin-left: 20px">价格:</span>
        <span style="font-size: 30px;color: #f60;text-align: center;margin-top: 30px">
          {{ view.viewPrice }}￥</span>
        <br>
        <br>
        <el-button type="warning" @click="viewSubmit(view.viewId)" style="margin-left: 40px">查看详情</el-button>
      </el-col>
    </el-row>
</div>
    <div class="guanggao">
      <h3 style="margin-left: 10px;">去哪旅行</h3>

      <p style="margin-left: 15px;font-size: 16px;color: #00bcd4">全面覆盖</p>
      <p style="margin-left: 8px;">2万景区，门票联票，应有尽有</p>

      <p style="margin-left: 15px;font-size: 16px;color: #00bcd4">超值低价</p>
      <p style="margin-left: 8px;">2万景区，门票联票，应有尽有</p>

      <p style="margin-left: 15px;font-size: 16px;color: #00bcd4">购票方便</p>
      <p style="margin-left: 8px;">随时购票，免排队，迅速入园</p>

      <p style="margin-left: 15px;font-size: 16px;color: #00bcd4">保障计划</p>
      <p style="margin-left: 8px;">入园保障，放心购票>></p>
    </div>
  </div>



</div>
</template>

<style scoped>
.map-container{
  background-image: url('../assets/14.jpg');
  background-size: cover;
  background-position: center center;
  //opacity: 0.9;
}
.text{
  border: 4px solid white;
}
.sousuo{
  margin-left: 5px;
  margin-top: 20px;
  width: 650px;
  line-height: 40px;
  padding: 5px;
  background: 0;
  font-family: "Hiragino Sans GB","微软雅黑",tahoma,arial,simsun,sans-serif;
  font-size: 20px;
  outline: 0;
  border: 2px solid #f80;
}
.sousuo1{
  margin-top: 22px;
  height: 55px;
  width: 110px;
  font-size: 20px;
}
.sousuo2{
  margin-top: 25px;
  margin-left: 300px;
}
.anniu{
  margin-left: 50px;
}
.jingdian{
  margin-top: 20px;
  margin-left: 20px;
}
.shuju{
  width: 1300px;
  height: auto;
  //background-color: gold;
}
.guanggao{
  width: 300px;
  height: 400px;
  border: 4px solid white;
  margin-left: 50px;
  //margin-top: -200px;
}
</style>
